Qué es Quarto®?

Quarto® es un nuevo sistema de publicación científica y técnica de código abierto construido sobre Pandoc ¹

Comunicar como parte de programar

RMarkdown en Rstudio

• Desarrollo del paquete knitr desde 2011
• Desarrollo de RMarkdown desde 2014 (rmarkdown + pandoc)
• 10 años de experiencia en knitr + rmarkdown se volcaron al desarrollo de Quarto.

Ejemplo interactivo con Observable JS

Conversor de temperatura de ℃ a ℉

viewof temp = Inputs.range([0, 99], {step: 1, value: 0, label: htl.html`Temp. ℃`})

Celsius = ℃ y Fahrenheit = ℉.

```{ojs}
viewof temp = Inputs.range([0, 99], {step: 1, value: 0, label: htl.html`Temp. ℃`})
```
Celsius = \${d3.format(".0f")(temp)}℃ y Fahrenheit = \${d3.format(".1f")(temp \* 9/5 + 32)}℉.

Entonces, ¿qué es Quarto?

Quarto es una interfaz de línea de comandos (CLI) que representa formatos de texto sin formato (.qmd, .rmd, .md) o formatos mixtos (.ipynb/Jupyter notebook) en informes estáticos PDF/Word/HTML, libros, sitios web, presentaciones y más.

cballejo$ quarto --help

  Usage:   quarto
  Version: 1.6.40

  Description:
    Quarto CLI

  Options:
    -h, --help     - Show this help.                            
    -V, --version  - Show the version number for this program.  

  Commands:
    render          [input] [args...]   - Render input file(s) to various document types.            
    preview         [file] [args...]    - Render and preview a document or website project.          
    serve           [input]             - Serve a Shiny interactive document.                        
    create-project  [dir]               - Create a project for rendering multiple documents          
    convert         <input>             - Convert documents to alternate representations.            
    pandoc          [args...]           - Run the version of Pandoc embedded within Quarto.          
    run             [script] [args...]  - Run a TypeScript, R, Python, or Lua script.                
    install         <type> [target]     - Installs an extension or global dependency.                
    publish         [provider] [path]   - Publish a document or project. Available providers include:
    check           [target]            - Verify correct functioning of Quarto installation.         
    help            [command]           - Show this help or the help of a sub-command.    

Otras características

Por qué usar Quarto en lugar de RMarkdown?

El universo de Quarto es enorme

Ejemplo de un .qmd

Los archivos .qmd responden estructuralmente al modelo de programación literaria (Literate programming)

---
title: "ggplot2"
date: "18/04/2024"
format: html
---

## Calidad del aire

Esta es la relación entre la temperatura y el nivel de ozono.

```{r}
#| label: fig-calidad_aire
library(ggplot2)
ggplot(airquality, aes(Temp, Ozone)) + 
  geom_point() + 
  geom_smooth(method = "loess"
)
```

Metadatos: YAML

Texto y otros elementos

Código

```{r}
#| Aquí van los metadatos con las opciones de ejecución

Aquí va el código
```

```{r}
radio <- 5
```

Algunos ejemplos para visualizar

Cabecera YAML: Opciones de salida

---
format: html
---

---
format: pdf
---

---
format: typst
---

---
format: 
  html:
    toc: true
    code-fold: true
---

YAML es sensible a la identación

---
format:html # invalido, falta espacio luego de :
---

---
format: # invalido, se lee como formato ausente
html
---

---
format: 
  html: # valido pero necesita de opciones posteriores
---

El formato válido puede ser diferente según lo que se necesite.

format: html # valido - hay espacio

# valido - formato con opciones
format: 
  html:
    toc: true

Ventajas de RStudio

RStudio (también algunos otros editores como VSCode) integran entre sus herramientas la finalización enriquecida: podemos comenzar con una palabra y tabular (TAB) para completar, o presionar Ctrl + espacio para ver todas las opciones disponibles.

Texto y Markdown

Inicialmente y para el uso general conviene aprovechar el modo Visual de RStudio para incorporar marcas de lenguaje Markdown. Prácticamente todos los elementos incorporados con formato markdown aplican en los diferentes formatos de salida (HTML, pdf, etc)

Bloques

Pandoc y, por tanto, Quarto aceptan bloques Divs y Spans propios del HTML con sintaxis delimitada por :::

Estructura general:

• Comienza y termina con igual número de : - mínimo de 3 :::
• Agregar llaves para indicar el inicio de la clase {.class} o {varias-clase}

::: {style="border-left:10px solid purple"}

Este contenido tiene un diseño de borde izquierdo violeta

:::

Bloques de llamadas

El formato básico de un bloque de llamadas es:

::: {.callout-*}
## Título del bloque

Texto incluído
:::

donde el * se reemplaza por el tipo de bloque. Además se puede configurar la apariencia y si se muestra o no el ícono asociado.

Bloques de llamadas

Bloques de línea (Spans)

Estructura general:

• Encerrar el texto con corchetes [].
• Agregar llaves para indicar el inicio de la clase {.class} o {varias-clases}

[texto]{.class}

Pestañas (TabSet)

```{r}
#| eval: false
head(datasets::iris)
```

  Sepal.Length Sepal.Width Petal.Length Petal.Width Species
1          5.1         3.5          1.4         0.2  setosa
2          4.9         3.0          1.4         0.2  setosa
3          4.7         3.2          1.3         0.2  setosa
4          4.6         3.1          1.5         0.2  setosa
5          5.0         3.6          1.4         0.2  setosa
6          5.4         3.9          1.7         0.4  setosa

Enlaces web

Existen varios tipos de “enlaces” o hipervínculos.

Se pueden insertar links en formato Markdown vinculados 
a un texto como este de [Quarto](https://quarto.org/), 
URL directas como <https://www.ine.gov.ar/> y 
enlaces a [otros lugares](#docu-estaticos-title) 
en el mismo documento. 
La sintaxis es similar a incrustar un imagen en línea: 
![Nombre](imagen.png). 

Tablas

Tablas Markdown

Markdown:

| Derecha | Izquierda | Predeterminado | Centrado |
|--------:|:----------|----------------|:--------:|
|    12   |    12     |       12       |    12    |
|   123   |   123     |      123       |   123    |
|     1   |     1     |        1       |     1    |

Tablas Grid (cuadrícula)

Las tablas cuadrícula son un tipo más avanzado de tablas de Markdown que permiten otros elementos (múltiples párrafos, bloques de código, listas, etc.)

Markdown:

+---------------+---------------+--------------------+
| Formato       | Extensión     | Ventajas           |
+===============+===============+====================+
| Documento     | pdf           | - Seguro           |
| portable      |               | - Universal        |
+---------------+---------------+--------------------+
| Word          | docx          | - Editable         |
|               |               | - Universal        |
+---------------+---------------+--------------------+

: Ejemplo tabla cuadrícula 

Tablas Grid (cuadrícula)

Salida:

Tablas cuadrícula: Alineación

• Las alineaciones se pueden especificar como en las tablas anteriores, colocando dos puntos en los límites de la línea de separación después del encabezado:

+--------------------+---------------+--------------------+
| Derecha            | Izquierda     | Centrado           |
+===================:+:==============+:==================:+
| Documento portable | pdf           | -  Seguro          |
+--------------------+---------------+--------------------+

+--------------:+:--------------+:------------------:+
| Derecha       | Izquierda     | Centrado           |
+---------------+---------------+--------------------+

Tablas cuadrícula: Creación

Fórmulas

Al igual que en RMarkdown se puede insertar fórmulas matemáticas Latex en linea o en imagen completa, utilizando $ o $$ según corresponda.

• Este es un ejemplo de formula en linea \(\sqrt{\frac{\alpha}{2}}\)

$\sqrt{\frac{\alpha}{2}}$

• La siguiente es una formula completa:

\[ R(t)= A \left(\frac{E_0}{\rho_0}\right)^{1/5}t^{2/5} \]

$$
R(t)= A \left(\frac{E_0}{\rho_0}\right)^{1/5}t^{2/5}
$$

Caracteres especiales, emojis y listas de definiciones

En el modo Visual se pueden insertar facilmente caracteres especiales de distinto tipo, emojis y listas de términos. Por ejemplo:

Caracteres especiales:

② ≋ 𝄞 ⍾ ◴ ⭆

Emojis:

😀 🥶 👍 🤡

Listas de definición

Clase en programación orientada a objetos

Es una plantilla que define las características y comportamientos de una entidad

Diagramas

Quarto tiene soporte nativo para incrustar diagramas Mermaid y Graphviz . Esto permite crear diagramas de flujo, diagramas de secuencia, diagramas de estado, diagramas de Gantt y otros utilizando una sintaxis de texto plano inspirada en Markdown.

```{{mermaid}}
flowchart LR
  A[Inicio] --> B(Pre-proceso)
  B --> C{Decisión}
  C --> D[Resultado 1]
  C --> E[Resultado 2]
```

• Para ver más sobre la documentación de Mermaid.js

Inclusión de código en Quarto

En todo documento Quarto se puede incluir código de diferentes lenguajes de programación (R, python, julia, javascript, etc).

Opciones de ejecución de código

Algunas de las opciones de control de ejecución de los chunck de código.

Tablas desde código

Salida directa, igual que en consola y estéticamente feas.

```{r}
library(datos)

pinguinos |> 
  slice(1:6)
```

# A tibble: 6 × 8
  especie isla   largo_pico_mm alto_pico_mm largo_aleta_mm masa_corporal_g sexo 
  <fct>   <fct>          <dbl>        <dbl>          <int>           <int> <fct>
1 Adelia  Torge…          39.1         18.7            181            3750 macho
2 Adelia  Torge…          39.5         17.4            186            3800 hemb…
3 Adelia  Torge…          40.3         18              195            3250 hemb…
4 Adelia  Torge…          NA           NA               NA              NA <NA> 
5 Adelia  Torge…          36.7         19.3            193            3450 hemb…
6 Adelia  Torge…          39.3         20.6            190            3650 macho
# ℹ 1 more variable: anio <int>

Tablas desde código

El paquete knitr, incuído en RStudio, puede convertir las salidas estos dataframes en tablas visuales con knitr::kable():

Tablas desde código

Existen numerosos paquetes para darle formato a las tablas producidas mediante código.

Un ejemplo muy completo es el paquete flextable, que vimos en clases anteriores.

Además de salidas HTML es compatible con pdf y Word (docx).

La documentación se encuentra en este enlace

Tablas desde código

Otro paquete para tablas elaboradas es gt.

Aquí podemos encontrar todo lo que ofrece.

Gráficos desde código

```{r}
library(datos)
library(ggplot2)

pinguinos |> 
  ggplot(aes(x = largo_pico_mm,
                     y = alto_pico_mm,
                     col = isla)) +
  geom_point()
```

Ejemplo: Gráficos desde código

```{r}
#| fig-width: 5
#| fig-height: 3

library(datos)
library(ggplot2)

pinguinos |> 
  ggplot(aes(x = largo_pico_mm,
                     y = alto_pico_mm,
                     col = isla)) +
  geom_point()
```

Ejemplo: Gráficos desde código

```{r}
#| fig-width: 5
#| fig-height: 3
#| fig-cap: "Tamaño de los pingüinos en 
tres islas del Archipelago Palmer."
#| fig-alt: "Diagrama de dispersión que 
muestra el tamaño de los picos de los 
pingüinos en tres islas"

library(datos)
library(ggplot2)

pinguinos |> 
  ggplot(aes(x = largo_pico_mm,
                     y = alto_pico_mm,
                     col = isla)) +
  geom_point()
```

Temas estéticos

Los documentos HTML renderizados con Quarto usan Bootstrap 5 de forma predeterminada. Esto se puede personalizar a través de la opción de theme: en la cabecera YAML.

theme: default # bootstrap 5 predeterminado
theme: cosmo   # tema cosmo bootswatch 
theme: pandoc  # tratamiento de pandoc predeterminado
theme: none    # no usa ningún tema css 

Quarto incluye 25 temas del proyecto Bootswatch, entre los cuales se encuentran: lumen, minty, journal, etc.

En la cabecera YAML, junto al tema se puede definir algunas variables estéticas que se usarán al renderizar el documento, como mainfont, fontsize, fontcolor, etc.

title: "Mi Documento"
format:
  html: 
    theme: lumen      # tema lumen
    fontsize: 12pt    # tamaño de la fuente en 12 puntos
    fontcolor: blue   # color azul

Personalización

Podemos realizar una amplia personalización de temas utilizando Sass. Existen más de 1400 variables Sass que controlan fuentes, colores, relleno, bordes y mucho más.

Este idioma, extensión de CSS, se utiliza en archivos .scss que se incluyen en la cabecera YAML.

theme:
  - lumen
  - custom.scss

El contenido del archivo custom.scss, que debe estar ubicado en la misma carpeta donde está el .qmd, podría ser:

/*-- scss:defaults --*/

$h2-font-size: 20pt;    # tamaño de fuente 20 pt en cabecera 2
$font-size-base: 12pt;  # tamaño de fuente 12 pt en texto base
$link-color: #af3434;   # color de enlace web

Otros formatos de salida posibles

Editando la cabecera YAML se puede definir formatos de documentos distintos a HTML.

Entre las opciones de documentos con fines de impresión se encuentran:

PDF (LaTeX)

TinyTex

TinyTeX es una distribución LaTeX personalizada, basada en TeX Live, que es pequeña en tamaño pero funciona bien en la mayoría de los casos, especialmente para usuarios de R.

Se instala ejecutando la siguiente linea en la Terminal de RStudio

quarto install tinytex --update-path

Luego activamos la opción:

Use tinytex when compiling .tex files

en Global options de RStudio y reiniciamos.

Cabecera PDF

Las cabecera básica de documentos PDF basados en LaTeX es:

---
title: "Mi Documento"
format:
  pdf:
    toc: true
---

* en este ejemplo, además activamos tabla de contenidos.

La mayoría de las opciones de ejecución vistas para HTML sirven para este tipo de documentos.

Quarto utiliza clases de documentos KOMA Script de forma predeterminada para libros y documentos PDF.

Clases de documentos

La opción de ejecución documentclass: posibilita cambiar de clase utilizando la configuración KOMA Script.

Clases de documentos

Seleccionar que clase de documento pdf queremos tendrá que ver con lo que estemos produciendo.

Por ejemplo, los artículos estan configurados predeterminandamente con una sola cara, lo mismo que los reportes. En cambio, los libros son de doble cara.

De todas maneras, las opciones se pueden cambiar con classoption: (oneside, twoside)

Otras opciones de ejecución

Librerías latex

Algunas librerías Latex como geometry vienen implementadas dentro de TinyTex y asociadas a la cabecera YAML de Quarto. Otras librerías pueden llamarse desde la opción include-in-header para inyectar comandos Latex.

Por ejemplo, incluyendo una fuente específica para el texto.

format:
  pdf:
    include-in-header:
      - text: |
          \usepackage{sourcesanspro}

Latex puro

Al crear un documento PDF, Pandoc permite el uso de código LaTex puro entre el markdown.

\begin{tabular}{ll}
A & B \\
A & B \\
\end{tabular}

Si bien es muy conveniente para este formato, el código se ignora cuando se procesa en otros como HTML y Word.

Tengamos en cuenta que en algunos casos, el LaTeX puro requerirá paquetes de LaTeX adicionales (que deberemos incluir en la cabecera).

PDF (typst)

Typst es un nuevo sistema de composición tipográfica de código abierto basado en un lenguaje de marcas que está diseñado para ser tan potente como LaTeX y al mismo tiempo mucho más fácil de aprender y usar. Genera buenos resultados en PDF con tiempos de renderizado muy rápidos.

Dado que Typst está en desarrollo activo y fue incorporado en la última versión de Quarto, todavía existen algunas limitaciones en el soporte. Es decir, que algunas caracterísiticas nativas como el diseño de página avanzado no están del todo implementadas.

Cabecera typst

---
title: "Mi Documento"
format:
  typst:
    columns: 2
---

* en esta cabecera, además definimos 2 columnas para el documento.

La gran mayoría de opciones de cabecera generales de YAML para Quarto funcionan en typst.

Diseño de página

Se puede controlar el diseño de la página mediante opciones de cabecera:

• papersize: tamaño de la página (“a4”, “us-letter”, “us-legal”, etc)
• margin: márgenes de la página (top, right, bottom, left - medido en pulgadas in o centímetros cm)
• columns: cuantas columnas tendrá el diseño (por defecto 1 columna)
• mainfont: fuente principal (busca fuentes instaladas en el sistema pero se puede indicar rutas adicionales con font-paths)
• fontsize: tamaño de fuente base (medida en puntos pt)

typst puro

Al igual que el LaTeX se puede insertar bloques de código typst sin formato dentro del documento

```{=typst} 
#set par(justify: true)

== Título
Este es un ejemplo de texto en typst.

Para obtener más información sobre marcado typst, consulte el tutorial aquí: https://typst.app/docs/tutorial/

Bloques nativos typst

Se puede cambiar la apariencia de bloques mediante llamadas nativas de Typst, utilizando la clase .block en un Div con los argumentos apropiados.

::: {.block fill="luma(230)" inset="8pt" radius="4pt"}

Este es un bloque con fondo gris y las aristas redondeadas. 

:::

Fórmulas typst

Typst tiene composición tipográfica matemática incorporada y utiliza su propia notación.

La notación va encerrada entre signos $, de forma similar al LaTeX.

{=typst} 
$ 7.32 beta +
  sum_(i=0)^nabla
    (Q_i (a_i - epsilon)) / 2 $

Pantillas personalizadas

Existen plantillas typst preconfeccionadas que se pueden utilizar o bien personalizar una propia.

En el siguiente tutorial de typst guian en la creación de una plantilla.

También en el sitio Awesome Quarto hay páginas de plantillas de terceros disponibles para utilizar.

Word (docx)

Las cabecera básica de documentos Word es:

---
title: "Mi Documento"
format:
  docx:
    toc: true
    toc-depth: 2
    toc-title: Contenidos
---

* en el ejemplo, además activamos tabla de contenidos, con una profundidad de 2 y título de tabla “Contenidos” (en español).

La mayoría de las opciones de ejecución vistas para HTML sirven para este tipo de documentos.

Plantillas Word

Para personalizar la apariencia de los documentos resultantes en Word se puede añadir en la cabecera una plantilla con diseño modificado. Para esto se sigue el siguiente paso a paso:

Tableros de Quarto®

Los dashboards o tableros de Quarto son archivos HTML que pueden ser:

• Estáticos Se representan una sola vez y los datos no cambian - pueden incluir elementos dinámicos.

• Programados Se representan a partir de un cronograma donde los datos se actualizan

• Parametrizados Se modifican a partir de parámetros

• Interactivo Mediante Shiny - requieren de servidor especial

Cabecera YAML

El formato de la cabecera YAML de los tableros de Quarto es dashboard.

---
title: "Mi tablero"
format: dashboard
---

La salida generada es HTML y la estructura se asemeja al uso del paquete flexdashboard de RMarkdown.

Se puede definir como será la orientación y si se habilita el scrolling de la página.

Otras opciones específicas de la cabecera YAML para tableros son los logotipos y los botones de navegación.

Cabecera YAML

Se reconocen alias para botones especiales predeterminados: linkedin, facebook, reddit, twitter y github. También se pueden crear botones personalizados a partir de íconos bootstrap.

    logo: images/INE.gif
    nav-buttons: 
      - linkedin
      - twitter
      - github
      - facebook
      - reddit
      - icon: hospital
        href: https://www.ine.gov.ar
        target: _blank

Componentes

Los tableros constan de varios componentes:

Barra de navegación: ícono, título y autor junto con enlaces a subpáginas (si se define más de una página).

Páginas, filas, columnas y conjuntos de pestañas: las páginas, filas y columnas se definen mediante encabezados de Markdown (con atributos opcionales para controlar la altura, el ancho, etc.). Los conjuntos de pestañas se pueden utilizar para dividir aún más el contenido dentro de una fila o columna.

Tarjetas, barras laterales y barras de herramientas: las tarjetas son contenedores para gráficos, visualización de datos y contenido de formato libre. El contenido de las tarjetas generalmente se asigna a celdas en el documento fuente. Las barras laterales y las barras de herramientas se utilizan para presentar entradas dentro de tableros interactivos.

Diseño

Los elementos de diseño básico son paginas, filas, columnas y pestañas.

Las paginas se definen con encabezados tamaño 1 (#)

Las filas y columnas se declaran con encabezados tamaño 2 (##)

Las pestañas utilizan la clase {.tabset} en filas tipo ## y cada pestaña se declara con un encabezado de tamaño 3 (###)

Páginas

# Pagina 1 

# Pagina 2 

# Pagina 3 

Filas

## Row {height=30%}

::: {.card title="Fila 30%"}
:::

## Row {height=70%}

::: {.card title="Fila 70%"}
:::

Columnas

## Column {width=30%}

::: {.card title="Columna 30%"}
:::

## Column {width=70%}

::: {.card title="Columna 70%"}
:::

Pestañas

## Row {.tabset}

### Pestaña 1

::: {.card title=""}
:::

### Pestaña 2

::: {.card title=""}
:::

Barra lateral

## {.sidebar}

```{r}
cat("Barra lateral")

cat("Input 1")

cat("Input 2")

cat("Input 3")
```

Tarjetas

Las tarjetas que se ubican en las celdas que generan las filas, las columnas y/o las pestañas tienen un botón de expansión automático que maximiza la visualización.

Tarjetas - contenido

La sintaxis de una tarjeta incluída en el diseño de página de un tablero tiene la forma:

::: {.card title="Título de la tarjeta"}

Aquí va el texto o elemento markdown / HTML a publicar

:::

El contenido de las tarjetas puede ser cualquiera de los elementos vistos anteriormente en Quarto basados en markdown o código HTML puro. También es útil incorporar valores dinámicos mediante código en línea.

Cajas de valor

Los cajas de valor son una excelente forma de mostrar valores simples de manera destacada dentro de un tablero.

Cajas de valor

La sintaxis dentro de un fragmento de código R tiene la siguiente estructura:

```{r}
#| content: valuebox 
#| title: "Texto de la caja de valor" 
 
list(
  icon = "nombre-icono",
  color = "color de la caja",
  value = valor a mostrar)
)

```

Los íconos pueden ser cualquiera de los 2000 disponibles en íconos de bootstrap

En color puede especificarse alguno de la paleta general hexadecimal o con palabras reservadas tipo primary, success, danger, etc. Estos colores variaran según el tema estético aplicado al tablero.

Cajas de valor

También se pueden crear cajas de valores usando Markdown simple, en cuyo caso normalmente se incluye el valor mediante una expresión en línea. Por ejemplo:

## Row

::: {.valuebox icon="heart-pulse-fill" color="danger"}
Cantidad de enfermos

´{r} enfermos´
:::

Tablas desde código

Se pueden incluir tablas dentro de estos tableros de dos formas:

• Como una presentación tabular simple
• Como un widget interactivo que incluya, por ejemplo ordenamiento y filtrado.

Si lo que se quiere mostrar es una cantidad pequeña de observaciones se puede utilizar funciones de knitr o flextable sin problemas.

```{r}
knitr::kable(datos)

# o con flextable

datos |> 
  flextable()
```

Estas tablas tendrán composición Markdown simples y llenan automáticamente al contenedor (desplazándose horizontal y verticalmente según sea necesario).

Tablas desde código

Si la tabla que queremos mostrar tiene muchos registros o es conveniente que se pueda ordenar de formas ascendente o descendente por alguna/s variable/s o hacer alguna busqueda particular, tenemos que hacer uso de algún paquete que incluya cierta interactividad.

Por ejemplo, el paquete DT, esta basado en una interfaz de JavaScript DataTables y agrega filtrado, paginación y ordenamiento a sus salidas.

```{r}
library(DT)
datatable(datos)
```

Tablas desde código

Gráficos desde código

Los gráficos son los elementos más comunes mostrados en tableros. Al igual que las tablas pueden ser estáticos o dinámicos/interactivos.

• Los estáticos serán gráficos generalmente producidos con ggplot2
• Los dinámicos estarán basados en alguna librería de JavaScript que incluyen los paquetes especiales ggiraph, Plotly, highcharter, dygraphs, etc.
• También hay algunas librerías para mostrar mapas como Leaflet o mapview

Gráficos desde código

Ejemplo con ggiraph

htmlwidgets

Estos componentes dinámicos / interactivos basados en JavaScript mostrados en los paquetes para tablas y gráficos anteriores pertenecen a htmlwidgets.

En el sitio https://www.htmlwidgets.org/ perteneciente a RStudio / Posit se encuentran publicada la galería de librerías disponibles.

Cada uno de los 132 paquetes citados tienen su propia página con la referencia de sus funciones, modo de uso, ejemplos, etc.

Estos componentes se pueden incluir en dashboards con y sin servidor Shiny asociado y también en documentos HTML de Quarto.